<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物车</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="../css/reset.css" />
	<link rel="stylesheet" href="../css/index02.css" />
</head>
<body>
	<header class="header">
		<img src="../img/fanhui.png">
		<h3>购物车</h3>
		<p>去接算</p>
	</header>
	<section class="section">
		<div class="aa">
			<p>商品数量 : <span>1</span></p>                      
			<p>应付总额(不含运费) : <label>&yen199</label></p>
		</div>
		<div class="bb">
			<dl>
				<dt><img src="../img/index02-img.png"></dt>
				<dd>
					<p>气质v领酒红Txue <img src="../img/p4.png"/></p>
					<p>Txue </p>
					<p>单价：<span>&yen;199</span><b>L</b></p>
					<p>数量：<button class="min" name="" type="button" value="-" />-</button> 
							<input class="text_box" name="" type="text" value="1" /> 
							<button class="add" name="" type="button" value="+" />+</button>
				</dd>
			</dl>
		</div>
		

	</section>


	<footer>
        	<ul>
        		<li>
        			<img src="../img/tab-shou.png"  />
        			<a href="#">首页</a>
        		</li>
        		<li>
        			<img src="../img/tab-fen.png"  />
        			<a href="#">分类</a>
        		</li>
        		<li>
        			<img src="../img/tab-gou.png"  />
        			<a href="#">购物车</a>
        		</li>
        		<li>
        			<img src="../img/tab-xiu.png"  />
        			<a href="#">我的秀</a>
        		</li>
        		<li>
        			<img src="../img/tab-geng.png"  />
        			<a href="#">更多</a>
        		</li>
        	</ul>
        </footer>
	<script src="../js/jquery-1.11.2.min.js"></script>
	<script>
		$(function(){
			$(document).on('click','.bb img',function(){
				$(this).parent().stop().slideUp(function(){
					$(".bb").remove()
				})
			})
		
		
					$(".add").click(function(){ 
					var t=$(this).parent().find('input[class*=text_box]'); 
					t.val(parseInt(t.val())+1) 
					setTotal(); 
					}) 
					$(".min").click(function(){ 
					var t=$(this).parent().find('input[class*=text_box]'); 
					t.val(parseInt(t.val())-1) 
					if(parseInt(t.val())<0){ 
					t.val(0); 
					} 
					setTotal(); 
					}) 
					function setTotal(){ 
					var s=0; 
					$("#tab td").each(function(){ 
					s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text()); 
					}); 
					$("#total").html(s.toFixed(2)); 
					} 
					setTotal(); 
					
					$('footer ul li:nth-child(1)').click(function(){
        			location.href="../index.html"
        		})
        		$('footer ul li:nth-child(2)').click(function(){
        			location.href="fenlei.html"
        		})
        		$('footer ul li:nth-child(3)').click(function(){
        			location.href="index02.html"
        		})
        		$('footer ul li:nth-child(4)').click(function(){
        			location.href="shoucang.html"
        		})
        		$('footer ul li:nth-child(5)').click(function(){
        			location.href="more.html"
        		})
        		$('.box ul li:nth-child(1)').click(function(){
					history.back()
				})
					
					
					
					
					
					}) 
				
			
	</script>
	<script>
			$(".dibu ul li").eq(0).on("click",function(){
				//$(".main").load("fenlei.html")
				location.href="shouye.html"
			})
			$(".dibu ul li").eq(1).on("click",function(){
				//$(".main").load("fenlei.html")
				location.href="fenlei.html"
			})
			$(".dibu ul li").eq(3).on("click",function(){
				//$(".main").load("fenlei.html")
				location.href="wodeshoucang.html"
			})
			$(".dibu ul li").eq(4).on("click",function(){
				//$(".main").load("fenlei.html")
				location.href="gengduo.html"
			})
			$(".box ul li").eq(2).on("click",function(){
				//$(".main").load("fenlei.html")
				location.href="wodedingdan.html"
			})

			
		</script>



</body>
</html>